<template>
	<view>
		<view class="formbox">
			<view class="formbox-item1">
				<view class="title">店名</view>
				<view class="value">
					<input type="text" placeholder-class="placeholderClass" placeholder="请输入店名"/>
				</view>
			</view>
			<view class="formbox-item1">
				<view class="title">负责人姓名</view>
				<view class="value">
					<input type="text" placeholder-class="placeholderClass" placeholder="请输入负责人姓名"/>
				</view>
			</view>
			<view class="formbox-item1">
				<view class="title">负责人电话</view>
				<view class="value">
					<input type="number" placeholder-class="placeholderClass" placeholder="请输入负责人电话"/>
				</view>
			</view>
			<view class="formbox-item1">
				<view class="title">所在地区</view>
				<view class="value">
					<region-picker @change="region_change" class="pickerbox" jsonPath="All">
						<view class="picker">
							<input disabled="disable" class="uni-input" placeholder-class="placeholderClass" placeholder="请选择省、市、区" v-model="areaCity" />
						</view>
					</region-picker>
					<image class="right" src="../../static/usercenter/icon_zk.png"></image>
				</view>
			</view>
			<view class="formbox-item1">
				<view class="title">地址</view>
				<view class="value">
					<input type="text" placeholder-class="placeholderClass" placeholder="请填写地址"/>
				</view>
			</view>
			<view class="formbox-item1">
				<view class="title">营业执照</view>
				<view class="addbox">
					<view class="add-icon"><image src="../../static/add-icon.png"></image></view>
					<view class="add-text">立即上传</view>
				</view>
			</view>
		</view>
		<view class="fiexd-btn">
			<button>提交</button>
		</view>
	</view>
</template>

<script>
	import regionPicker from "@/components/region-picker/region-picker.vue"
	export default {
		components: {
			regionPicker
		},
		data(){
			return{
				provinceId: '',
				areaId: '',
				cityId: '',
				areaCity:''
			}
		},
		methods: {
			region_change(e) {
				console.log("=============");
				console.log(e);
				let code = e.detail.code;
				let value = e.detail.value;
				let id = e.detail.id;
				this.provinceId = id[0];
				this.cityId = id[1];
				this.areaId = id[2];
				this.areaCity = value[0] + value[1] + value[2];
			}
		}
	}
</script>

<style lang="scss">
	.formbox{
		padding-bottom: 140rpx;
		.formbox-item1{
			margin: 0 40rpx;
			padding: 35rpx 0;
			border-bottom: 1rpx solid #e0e0e0;
			.title{
				font-size: 28rpx;
				color: #333333;
				margin-bottom: 54rpx;
			}
			.addbox{
				width: 650rpx;
				height: 231rpx;
				background: #F8F8F8;
				border-radius: 10rpx;
				text-align: center;
				padding-top: 60rpx;
				image{
					width: 110rpx;
					height: 110rpx;
					margin-bottom: 32rpx;
				}
				.add-text{
					color: #12ADA9;
					font-size: 28rpx;
				}
			}
			.value{
				display: flex;
				.pickerbox{
					font-size: 28rpx;
					color: #BFBFBF;
					flex: auto;
				}
				input{
					font-size: 28rpx;
					color: #BFBFBF;
					flex: auto;
				}
				.right{
					width: 36rpx;
					height: 36rpx;
				}
			}
			
		}
		.formbox-item1:last-child{
			border-bottom: 0rpx;
		}
	}
</style>
